<template>
  <view>
    <view class="user-info-top">
      <u-field
        class="form-name"
        v-model="formDataUserInfo.name"
        label-width="0"
        placeholder="您的姓名"
        maxlength="10"
        :clearable="false"
      >
      </u-field>
      <view
        class="sex-radio flex_center"
        @click="formDataUserInfo.sex = 0"
      >
        <view class="circle-outer flex_center">
          <view v-if="formDataUserInfo.sex === 0" class="circle-inner"></view>
        </view>
        先生
      </view>
      <view
        class="sex-radio flex_center"
        @click="formDataUserInfo.sex = 1"
      >
        <view class="circle-outer flex_center">
          <view v-if="formDataUserInfo.sex === 1" class="circle-inner"></view>
        </view>
        女士
      </view>
    </view>
    <view class="user-info-bottom">
      <u-field
        class="form-name"
        v-model="formDataUserInfo.mobile"
        label-width="0"
        placeholder="手机号码"
        maxlength="15"
        :clearable="false"
      >
        <button
          slot="right"
          class="tel-btn flex_center"
          open-type="getPhoneNumber"
          @getphonenumber="bindgetphonenumber"
        >
        微信授权
        </button>
      </u-field>
    </view>
    <view class="user-info-agreement">
      <u-checkbox v-model="formDataUserInfo.checked" shape="square" name="accept" active-color="#818181" size="40rpx"></u-checkbox>
      <view class="msg">感谢参与活动，塔思琦尊重您的隐私，建议您充分阅读、理解<span @click="show = true">活动说明</span>与<span @click="goWebView">隐私条款</span>。</view>
    </view>
    <u-popup v-model="show" mode="center" width="600rpx" height="1180rpx">
			<view class="content" style="padding: 40rpx 30rpx">
				<scroll-view scroll-y="true" style="height: 1100rpx;">
					<view>
						<image src="https://cdc-file.risechina.com/img/2021/11/1635829905603.png" mode="widthFix" style="width: 100%"></image>
					</view>
				</scroll-view>
			</view>
		</u-popup>
  </view>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      formDataUserInfo: {
        name: '',
        sex: 0,
        mobile: '',
        checked: false
      },
      show: false
    }
  },
  methods: {
    async bindgetphonenumber(e) {
      console.log("获取手机号",e)
      // 收取键盘
      wx.hideKeyboard()
      if (typeof e.mp.detail.encryptedData !== 'string') {
        return
      }
      // 获取手机号后
      let that = this;
      let res = await that.$u.api.WXCHATAPI.getWXMobile({
        sessionKey: that.vuex_wechatInfo.sessionKey,
        encryptedData: e.mp.detail.encryptedData,
        iv: e.mp.detail.iv
      })
      this.formDataUserInfo.mobile = res.data.phoneNumber
    },
    goWebView() {
      const URL = 'https://sh20211022.hantieyi.cn/tasaki.html';
      uni.navigateTo({ 
        url: `/pages/webview?url=${encodeURIComponent(URL)}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep {
   
  }
  .user-info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .form-name {
      width: 350rpx;
      border: 1px solid #818181;
      font-size: 30rpx;
    }
  }
  .sex-radio {
    color: #818181;
    font-size: 30rpx;
    .circle-outer {
      width: 33rpx;
      height: 33rpx;
      border-radius: 50%;
      border:1px solid #818181;
      margin-right: 15rpx;
      .circle-inner {
        width: 16rpx;
        height: 16rpx;
        background-color: #000;
        border-radius: 50%;
      }
    }
  }
  .user-info-bottom {
    margin-top: 38rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .form-name {
      width: 625rpx;
      border: 1px solid #818181;
      font-size: 30rpx;
    }
    .tel-btn {
      background-color: transparent;
      border: none;
      color: #3e3a39;
      border-left: 1px solid #818181;
      border-radius: 0;
      padding-left: 50rpx;
      line-height: 1.5;
      font-size: 30rpx;
      &::after {
        border: none;
      }
      &.active {
        color: #3e3a39;
      }
    }
  }
  .user-info-agreement {
    display: flex;
    margin-top: 30rpx;
    .msg {
      font-family: HiraginoSansGB-W3;
      font-size: 26rpx;
      line-height: 40rpx;
      color: #818181;
      span {
        text-decoration: underline;
      }
    }
  }
</style>